 <template>
	<view class="content">
		<view class="change-card-list uni-list">
			<checkbox-group @change="selectCard">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in list" :key="item.value">
					<view>
						<checkbox :value="item.value" :checked="item.checked" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</checkbox-group>
		</view>
		<div class="change-card-bottom">
			<checkbox-group @change="selectCheckAll">
				<checkbox class="check-box" value="all" :checked="checkAll" style="transform:scale(0.8)">全选</checkbox>
			</checkbox-group>
			<button type="primary" class="okButton" @click="ok" size="mini">填写换卡地址</button>
		</div>
		<div style="height:60px;width:100%">

		</div>
		<uni-popup ref="popup" type="bottom" class="bottom-popup">

			<div class="address-card">

				<div class="select-top ">
					<span class="font-1">填写换货地址</span>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<input v-model="receiveName" class="uni-input input-style" focus placeholder="收件人" />
				<input v-model="phoneNumber " class="uni-input input-style" placeholder="电话" />
				<div class="input-style uni-input sheng-shi-qu" @click="$refs.simpleAddress.open()">
					{{area}}
				</div>
				<input v-model="address" class="uni-input input-style" placeholder="详细地址" />
				<button type="primary"  style="width:87%;" @click="acquire" :disabled="disabled">确定</button>
			</div>
		</uni-popup>
		
		<simple-address ref="simpleAddress" @onConfirm="onConfirm" themeColor='#007AFF'>
		
		</simple-address>
		
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.nvue';
	import pay from '@/utils/wxpayUtils.js'
	import {
		decryptDes
	} from '@/utils/utils'
	export default {
		data() {
			return {
				getChangeCardFlagListUrl:"card/getChangeCardFlagList",
				changeCardInformationUrl:"card/changeCardInformation/recheck",
				msgPageKey: '/pageKey/get.dnl',
				checkAll: false,
				index: 0,
				area:"省/市/区",
				defaultCardNumber:'',
				list: [],
				phoneNumber:"",
				receiveName:"",
				address:"",
				ids:[],
				defaultId:'',
				pagekey:"",
				uid: '',
				disabled: false,
			}
		},
		components: {
			simpleAddress
		},
		watch: {

		},
		onLoad(option){
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.defaultCardNumber = option.cardNumber;
			this.ids.push(option.cardId)
			this.defaultId = option.cardId
			this.initData()
		},
		onShow(){
		
		},
		methods: {
			initData(){
				this.items = []
				this.$req.userData(this.getChangeCardFlagListUrl,{}).then(v=>{
					v.data.forEach(a=>{
						let obj = {}
						obj.value = a.id
						obj.name = a.cardNumber
						obj.checked = false;
						if(obj.name==this.defaultCardNumber){
							obj.checked = true
						}
						this.list.push(obj)
						
					})
					let list=this.list.map(v=>{
						return v.value
					})
					
					if(!list.includes(this.defaultId)){
						this.ids=[]
					}
				})
			
			},
			onConfirm(e) {
				this.area= e.label;
			},
			closepop(){
				this.$refs.popup.close() 
			},
			async ok() {
				this.$refs.popup.open();
				this.pagekey = await this.$getPageKey();
			},
			selectCheckAll(e) {
				this.ids=[]
				if (e.detail.value.length == 0) {
					this.list.forEach(v => {
						v.checked = false
					})
				} else {
					this.list.forEach(v => {
						v.checked = true
						this.ids.push(v.value)
					})
				}
			},
			selectCard(e) {
				let values = e.detail.value
				if (values.length == this.items.length) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
				this.ids = values
			},
			addressCard() {

			},
			async acquire(){
				if(this.ids.length==0){
					uni.showToast({
						icon: "none",
						title: "请选择卡号！",
						duration: 3000
					});
					return 
				}
				if(this.receiveName==""||this.receiveName.length>5){
					uni.showToast({
						icon: "none",
						title: "请输入正确的收件人！",
						duration: 3000
					});
					return 
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号！",
						duration: 3000
					});
					return 
				}
		
				if(this.area=="省/市/区"){
					uni.showToast({
						icon: "none",
						title: "请选择省市区！",
						duration: 3000
					});
					return 
				}
			
			
				if(this.address==""||this.address.length>30){
					uni.showToast({
						icon: "none",
						title: "请输入正确的详细地址！(30位以内)",
						duration: 3000
					});
					return 
				}
				
				this.disabled = true;
				//查询运费金额 如果大于0直接跳转 card/getChangeCardPrice       user-data -system   获取邮费
				let res = await this.$req.userData('card/getChangeCardPrice',{ids:this.ids});
				if(res._result){
					let idsStr = this.ids.join(',');
					if(res._result){
						uni.navigateTo({
							url: '/pages/other/payment/payment?ids='+idsStr+'&address='+this.area+this.address+'&phoneNumber='+this.phoneNumber+'&receiveName='+this.receiveName+'&price='+res.data+'&type=post'
						})
					}
				}
				
			// 	await this.$req.userData(this.changeCardInformationUrl,{
			// 		ids:this.ids,
			// 		address:this.area+this.address,
			// 		phoneNumber:this.phoneNumber,
			// 		receiveName:this.receiveName,
			// 		pagekey:this.pagekey
			// 	}).then(async v=>{
			// 		//跳转到换卡记录
			// 		if(v.data.prepay_id==null){
			// 			uni.navigateTo({
			// 				url: '/pages/changeLog/changeLog'
			// 			})
			// 		}else{
						
						
			// 			pay(v.data, () => {
			// 				this.$message("付款成功！")
			// 				uni.navigateTo({
			// 					url: '/pages/changeLog/changeLog'
			// 				})
			// 			})
			// 		}
			// 		this.$refs.popup.close();
			// 		this.disabled = false;
			// 		this.initData();
			// 	}).catch(err=>{
			// 		this.disabled = false;
			// 		//TODO handle the exception
			// 	})
			// 	this.pagekey = await this.$getPageKey();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.change-card-list {
		width: 100%;
		height: calc(100vh - 48px);
		position: absolute;
		top: 0;
		left: 0;
		overflow-y: scroll;
	}

	.change-card-bottom {
		width: 100%;
		height: 48px;
		position: fixed;
		bottom: 0;
		background-color: $back-groud-color;
		z-index: 1;
	}

	.okButton {
		margin-top: 10px;
		position: absolute;
		right: 20px;

	}

	.check-box {
		position: absolute;
		left: 10px;
		top: 8px;
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.address-card {
		background-color: white;
		width: 100%;
		height: auto;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom: 40rpx;
	}

	.input-style {
		border: 1px solid $theme-color;
		width: 80%;
		margin: 10px auto;
		border-radius: 10px;
		height: 13px;
		display: flex;
		align-items: center;
	}

	.select-top {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: $theme-color;
		height: 80upx;
		width: 100%;
		padding-top: 20upx;
		color: white;

		.font-1 {

			margin-left: $left-10;
			font-size: large;
		}

		.font-2 {
			margin-top: 0px;
			font-size: small;
			margin-left: $left-10;
		}
	}
	.sheng-shi-qu{
		height: 20px;
		text-decoration:underline;
		color: $theme-color
	}
</style>
